<template>
  <div class="m-sys-reset-pwd">
    <h1>修改密码</h1>
    <el-form label-position="left" :inline="true">
      <el-form-item label-width="90px" label="用户名：">
        <el-input v-model="username"  placeholder="请填写用户名"></el-input>
      </el-form-item>
      <el-form-item label-width="90px" label="原始密码：">
        <el-input v-model="oldPassword" type="password" placeholder="请填写原始密码"></el-input>
      </el-form-item>
      <el-form-item label-width="90px" label="新密码：">
        <el-input v-model="newPassword" type="password" placeholder="请填写新密码"></el-input>
      </el-form-item>
      <el-form-item label-width="90px" label="确认密码：">
        <el-input v-model="confirmPassword" type="password" placeholder="请确认密码"></el-input>
      </el-form-item>
      <el-form-item label-width="90px" label=" ">
        <el-button type="primary" @click="updatePassword">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  /* eslint-disable indent,space-in-parens,quote-props,quotes */

  export default {
    data() {
      return {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null,
        username: null
      }
    },
    created() {

    },
    methods: {
      updatePassword() {
        if (this.username.length < 1 ) {
         alert('请填写用户名！')
        } else if (this.newPassword !== this.confirmPassword) {
          this.$notify.error({
            title: '失败',
            message: '两次密码不一致'
          })
          return false
        }
        this.api.post('/api/changePwd', {
          "password": this.newPassword
        }).then((response) => {
          if (response.code === 200) {
            this.$notify({
              title: '成功',
              message: '密码修改成功',
              type: 'success'
            })
            this.$router.push('../login')
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .m-sys-reset-pwd {
    .el-form {
      box-sizing: border-box;
      max-width: 570px;
      border: 1px solid #D3DCE6;
      box-shadow: 0 1px 3px 0 rgba(211, 220, 230, 0.50);
      border-radius: 2px;
      padding: 40px 40px 20px 45px;
      .el-form-item {
        width: 100%;
        .el-form-item__content {
          width: 70%;
        }

        .el-select,
        .el-input {
          width: 100%;
        }
      }
    }
  }
</style>
